<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相互调用方法</title>
</head>
<body>
<fieldset id="root">
    <legend><h1>这是父组件</h1></legend>
    <child1 ref="c1"></child1>
    <child2 ref="c2"></child2>
    <br><br>
    <button @click="clickRoot">调用C2方法</button>
</fieldset>
<template id="child1">
    <fieldset>
        <legend><h2>这是child1子组件</h2></legend>
        <button @click="clickC1">调用父组件的方法</button>
    </fieldset>

</template>
<template id="child2">
    <fieldset>
        <legend><h2>这是child2子组件</h2></legend>
    </fieldset>
</template>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let child1={
        template:"#child1",
        methods: {
            clickC1(){
                let Num=this.$parent.randomNumber(1,200);
                let str=this.$parent.$refs.c2.sendData();
                console.log(Num,str);
            }
        }

    }
    let child2={
        template:"#child2",
        data:function(){
          return{
              C2msg:"这是Child2返回的时间"
          }
        },
        methods:{
           sendData(){
               return this.C2msg+(new Date()).toISOString()
           }
        }
    }
    let root =new Vue({
        el:"#root",
        methods:{
            randomNumber(x,y){
             return Math.floor(Math.random()*(y-x+1)+x);
            },
            clickRoot(){
                let Str=this.$refs.c2.sendData();
                console.log(Str);
            },
        },
        components:{
            child2,
            child1,
        }
    })
</script>
